import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { List, Card, Grid, ErrorBlock } from "antd-mobile";
import { createAction } from "@common/utils";
import { SAGA_WAREHOUSE_QUERY_LOAD_LOC_DETAILS } from "@store/warehouse-query/saga-types";
import { useLocation } from "react-router-dom";

const LocInfo = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const dispatch = useDispatch();
  const locDetailList = useSelector(
    (state) => state.warehouseQuery.locDetailList
  );

  useEffect(() => {
    dispatch(
      createAction(SAGA_WAREHOUSE_QUERY_LOAD_LOC_DETAILS, {
        warehouseId: searchParams.get("warehouseId"),
        barcode: searchParams.get("barcode"),
      })
    );
  }, []);

  return (
    <div style={{ marginTop: "45px" }}>
      {locDetailList?.length > 0 ? (
        <List>
          {locDetailList.map((record, idx) => (
            <List.Item
              key={idx}
              style={{ backgroundColor: "#F5F5F5" }}
              description={
                <Card title={`${idx + 1}/${locDetailList.length}`}>
                  <Grid columns={2} gap={12}>
                    <Grid.Item>物料编码</Grid.Item>
                    <Grid.Item>{record.itemCode}</Grid.Item>
                    <Grid.Item>物料名称</Grid.Item>
                    <Grid.Item>{record.itemName}</Grid.Item>
                    <Grid.Item>规格型号</Grid.Item>
                    <Grid.Item>{record.spec}</Grid.Item>
                    <Grid.Item>数量</Grid.Item>
                    <Grid.Item>{record.qty}</Grid.Item>
                    <Grid.Item>单位</Grid.Item>
                    <Grid.Item>{record.unit}</Grid.Item>
                  </Grid>
                </Card>
              }
            />
          ))}
        </List>
      ) : (
        <ErrorBlock status="empty" title="暂无数据" description="" />
      )}
    </div>
  );
};

export default LocInfo;
